<template>
  <el-main>
    <!--        列表功能      -->
    <el-card class="box-card">
      <el-row class="mb-4">
        <el-button>全选</el-button>
        <el-button type="primary"><el-icon><CirclePlus /></el-icon>新增</el-button>
        <!--        <el-button type="success"><el-icon><Document /></el-icon>导出</el-button>-->
        <!--        <el-button type="warning"><el-icon><Switch /></el-icon>转交</el-button>-->
        <!--        <el-button type="info"><el-icon><Printer /></el-icon>打印</el-button>-->
        <el-button type="danger"><el-icon><Delete /></el-icon>删除</el-button>
      </el-row>
    </el-card>
    <!--       搜索       -->
    <tableSearch :filedTypeList="filedTypeList"></tableSearch>
    <!--      列表        -->
    <tableList
        :total="total"
        :pagesize="pagesize"
        :tableData="tableListData"
        :tableField="tableField"
        isSelectMult="true"
    ></tableList>
    <!--              //分页-->

    <!-- 更改弹窗状态 start -->
    <el-dialog
        v-model="dialogVisible"
        title="修改状态"
        width="30%"
    >
      <span>是否修改客户到院状态？</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 更改状态弹窗 end -->
  </el-main>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {
  Document
} from '@element-plus/icons-vue'
import { useStore } from "vuex";
import tableList from "../../../common/pages/table.vue";
import tableSearch from "../../../common/pages/tableSearch.vue";
//-------预约页面独立部分js   start -----//
//更改状态
const dialogVisible = ref(false)

//-------预约页面独立部分js   end -----//

//预约搜索字段
const filedTypeList = ref([
  {
    field: "diameter",
    label: "回访途径",
    type: "select",
    placeholder: "请选择客户状态",
    option: [
      {
        label: "西安医院",
        value: "shanghai", //选择的真正值
      },
      {
        label: "上海医院",
        value: "beijing",
      },
    ],
  },
  {
    field: "type",
    label: "回访类型",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "管理",
        value: "shanghai", //选择的真正值
      },
      {
        label: "员工",
        value: "beijing",
      },
    ],
  },
  {
    field: "status",
    label: "跟进状态",
    type: "select",
    placeholder: "请选择来源渠道",
    option: [
      {
        label: "管理",
        value: "shanghai", //选择的真正值
      },
      {
        label: "员工",
        value: "beijing",
      },
    ],
  },
  {
    field: "current_time",
    label: "跟进日期",
    type: "date",
    placeholder: "请选择跟进日期",
  },
]);

const total = 100   //数据总数
const pagesize = 20  //单页数据数量
//列表字段

const tableField = [

  {
    field:"diameter",
    label:"回访途径",
    width:"120"
  },
  {
    field:"type",
    label:"回访类型",
    width:"180"
  },
  {
    field:"level",
    label:"回访级别",
    width:"150"
  },
  {
    field:"name",
    label:"主题",
    fixed:"",
    width:"120"
  },
  {
    field:"description",
    label:"内容",
    width:"120"
  },
  {
    field:"status",
    label:"状态",
    width:"90",
    type:"tag",
    options:[
      "启用",
      "禁用",
    ],
  },
  {
    field:"current_time",
    label:"跟进日期",
    width:"150"
  },
  {
    field:"next_time",
        label:"下次跟进",
      width:"150"
  },
  {
    field: "opera",
    label: "操作",
    fixed:"right",
    width: "190",
    type:"opera",
    opera:[
      {
        type:"edit",
        text:"编辑",
      },
      {
        type:"delete",
        text:"删除"
      },
    ]
  },
]
//列表数据
const tableListData = [
  {
    username: 'yanyinzheng',   //用户名
    nickname: 'opt',    //昵称
    email: '1045434361@qq.com', //邮箱
    phone: '185****1491', //手机号
    department: '市场部',  //客户来源
    role: '专员',  //跟进人
    position: '员工',  //状态
    status: 1,   //账号状态
    hospital:'西安医院', //医院
    last_login_time: '2016-05-03 16:16',   //最后一次登录时间
  },
]



</script>

<style scoped>

</style>


